<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
      table{
        width:80%;
        margin:0 auto;
      }
      table,th,td,tr{
        border:1px solid black;
        border-collapse: collapse;
        text-align: center;

      }
      thead{
        height: 40px;
        background-color: pink;
        color: green;
      }
      h3{
        text-align: center;
        color: skyblue;
      }


    </style>
</head>
<body>
<!--网页中通过表格的形式展示学生信息
学号 名字 年龄 分数 性别-->
<h3>学生信息表</h3>
<table>
  <thead>
  <tr>
    <th>学号</th>
    <th>名字</th>
    <th>年龄</th>
    <th>分数</th>
    <th>性别</th>
  </tr>
  </thead>
  <tbody id="tbd">
  <tr>
  </tr>

  </tbody>

  <script>
    var students=[{
      stuNo:'2106164003',
      name:'lisi',
      age:20,
      score:98,
      sex:'男'
      },
      {
        stuNo:'2106164002',
        name:'zhangsan',
        age:28,
        score:60,
        sex:'男'

      },
      {
        stuNo:'2106164001',
        name:'wangwu',
        age:21,
        score:96,
        sex:'女'

      }
    ]
    document.getElementById('tbd')
    for (var index=0;index<students.length;index++){
      //如何将遍历的每一个对象 添加到页面当中 tr形式进行展示 dom
      console.log(students[index])
      var tr = document.createElement('tr')
      //tr中需要添加几个td 遍历对象 属性=》td
      for(var studentKey in students[index]){
        //创建td
        var td=document.createElement('td')
        //添加内容到td
        td.innerText=students[index][studentKey]
        tr.append(td)
        //添加tr到tbody
      }
      tbd.append(tr)
    }







  </script>
</table>
</body>
</html>